<template>
  <el-aside  width="auto" >
    <el-menu router
             :collapse="isCollapse"
             unique-opened
             clas="el-menu"
             :default-active="onRoutes"
             collapse-transition
             background-color="#232323"
             text-color="#ccc"
             active-text-color="#ddd"
             @click="clik">
      <el-submenu :index="index + ''"
                  v-for="(item, index) in routes"
                  :key="index"
                  v-if="!item.hidden">
        <template slot="title"><i :class="item.iconCls"
             style="margin-right: 5px"></i>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="children.path"
                        v-for="(children, indexj) in item.children">
            <span>{{ children.name }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<script>
import Bus from './bus'
export default {
  name: 'Sidebar',
  data() {
    return {
      isCollapse: false,
      url:""
    }
  },
  computed: {
    routes() {
      return this.$store.state.routes
    },
    onRoutes() {
         return this.$route.fullPath.name;
      }
  },
  created() {
    // 通过 event bus进行组件间的通信 来折叠和展开侧边栏
    Bus.$on('collapse', (isCollapse) => {
      this.isCollapse = isCollapse
    })
  },
  methods: {
   clik(){
     console(onRoutes)
   }
  },
}
</script>

<style scoped lang="less">
.el-menu {
  height: 100%;
  border: none;
  &:not(.el-menu--collapse) {
    width: 200px;
  }
}
.el-menu-item.is-active {
  border-left: 3px solid @mainColor;
  background-color: #171717 !important;
}
</style>
